<template>
	<AbnormalTemplate
		id="nuclearSafety"
		:treeData="treeData"
		@treeHandle="treeHandle"
	>
		<div slot="leftRule" style="position: relative">
			<!-- <div class="tips">*当前核安全排名统计时间为3个月一次</div> -->
			&emsp;<el-button v-if="showDetail" @click="showDetail = false"
				>返回</el-button
			>
		</div>
		<div slot="rightBtn">&nbsp;<el-button @click="downloadExcel">导出</el-button></div>
		<Table
			v-if="!showDetail"
			:tableData="tableData"
			:tableHead="tableHead"
			:propKey="{ prop: 'id', label: 'name' }"
			:isUseSlot="false"
			:page="listQuery.page"
			:limit="listQuery.limit"
			v-loading="listLoading"
			@handleEdit="handleEdit"
		>
		</Table>
		<el-table
			v-else
			:data="detailData"
			border
			:span-method="objectSpanMethod"
			:row-class-name="tableRowClassName"
		>
			<el-table-column
				label="序号"
				prop="index"
				width="80"
				align="center"
			>
				<template slot-scope="scope">
					<span v-if="scope.$index < detailData.length - 3">{{
						scope.$index
					}}</span>
					<span v-else-if="scope.$index == detailData.length - 3"
						>小计</span
					>
					<span v-else-if="scope.$index == detailData.length - 2"
						>得分</span
					>
					<span
						v-else-if="scope.$index == detailData.length - 1"
					></span>
					<span v-else></span>
				</template>
			</el-table-column>
			<el-table-column
				v-for="item in tableDetailHead"
				:key="item.prop"
				:prop="item.prop"
				:label="item.label"
				width=""
			>
				<template slot="header" slot-scope="scope">
					<div v-if="item.prop === 'minute'">
						<div>{{ item.label }}</div>
						<div style="font-size:12px;">{{ item.sTitle }}</div>
					</div>
					<div v-else>
						{{ item.label }}
					</div>
				</template>
				<template slot-scope="{ row }">
					<div
						v-html="row[item.prop]"
						v-if="item.prop === 'enterprise'"
					></div>
					<span v-else>{{ row[item.prop] }}</span>
				</template>
			</el-table-column>
		</el-table>
		<Pagination
			v-show="total > 0"
			:total="total"
			:page.sync="listQuery.page"
			:limit.sync="listQuery.limit"
			@pagination="getList"
		></Pagination>
	</AbnormalTemplate>
</template>
<script>
import AbnormalTemplate from "@/template/abnormal.temp.vue";
import Table from "@/components/Table";
import Pagination from "@/components/Pagination"; // 分页
import {
	getSafetyData,
	getSafetyDetail
} from "@/api/RCIM/RCIM-nuclearSafetyRanking";
import {
	downLoadTest,
	exportExcelSafetyData,
} from "@/api/RCIM/RCIM-downloadFile";
import moment from "moment";
export default {
	name: "KdHistoryData",
	components: { AbnormalTemplate, Table, Pagination },
	data() {
		return {
			treeData: {},
			total: 5,
			listLoading: true,
			// 请求数据
			listQuery: {
				page: 1,
				limit: 10,
				date: "2019-12",
				startTime: "",
				endTime: "",
				nodeType: "",
				nodeId: ""
			},
			showDetail: false,
			tableData: [],
			// 表格头数据
			tableHead: [
				{
					id: "index",
					name: "排名",
					width: ""
				},
				{
					id: "enterprise",
					name: "企业",
					width: ""
				},
				{
					id: "abnormalCount",
					name: "异常数量",
					align: "center",
					width: ""
				},
				{
					id: "handleTime",
					name: "处理平均时间（h）",
					align: "center",
					width: ""
				},
				{
					id: "supervisionCount",
					name: "督办数量",
					align: "center",
					width: ""
				},
				{
					id: "score",
					name: "得分",
					align: "center",
					width: ""
				},
				{
					id: "operate",
					name: "操作",
					align: "center",
					width: ""
				}
			],
			tableDetailHead: [
				{
					prop: "abnormalType",
					label: "异常类型",
					align: "center",
					width: ""
				},
				{
					prop: "time",
					label: "产生时间",
					align: "center",
					width: ""
				},
				{
					prop: "minute",
					label: "处置时长（分钟）",
					sTitle: "*处置时长阈值240分钟",
					align: "center",
					width: ""
				},
				{
					prop: "isSuperise",
					label: "是否督办",
					align: "center",
					width: ""
				},
				{
					prop: "isHandle",
					label: "是否处理",
					align: "center",
					width: ""
				}
			],
			detailData: []
		};
	},
	mounted() {},
	created() {},
	methods: {
        /**
         * @desc 导出为Excel
         */
		downloadExcel(){
			this.$confirm('确认要导出为Excel吗？')
				.then(_ => {
					this.donloadLoading = true;
					this.getExcel({
						callback: exportExcelSafetyData,// 调用接口
						params: this.listQuery,
						id: 'nuclearSafetyRanking'
					}).then(res => {
						this.donloadLoading = false;
					}).catch(err => {
						this.donloadLoading = false;
					})
				})
				.catch(_ => {});
		},
        /**
         * @desc 左侧点击筛选
		 * @param {Object} param 节点数据
         */
		treeHandle(param) {
			console.log(param);
			this.showDetail = false;
			this.listQuery.nodeId = param.id;
			this.listQuery.nodeType = param.type;
			this.listQuery.startTime = moment(param.startTime).format(
				"YYYY-MM-DD"
			);
			this.listQuery.endTime = moment(param.endTime).format("YYYY-MM-DD");
			this.listQuery.date = moment(param.time).format("YYYY-MM");
			this.listQuery.treeType = param.treeType;
			this.getList();
		},
		// 进入查看页面
		handleEdit(row) {
			this.total = 0;
			this.showDetail = true;
			// 小计行初始化
			let initSingle = {
				abnormalType: "",
				time: "",
				minute: "",
				isSuperise: "",
				isHandle: ""
			};
			//传参
			let param = {
				id: row.enterpriseid,
				startTime: this.listQuery.startTime,
				endTime: this.listQuery.endTime,
				date: this.listQuery.date
			};
			this.getSafetyDetail(param, data => {
				let scoreList = [];
				console.log(data);
				if (data) {
					// 对小计行每列赋值
					for (const key in data.summation) {
						if (data.summation.hasOwnProperty(key)) {
							initSingle[key] = data.summation[key];
						}
					}
					let scoreList = [
						initSingle,
						{
							abnormalType: row.score, // 得分赋值
							time: "",
							minute: "",
							isSuperise: "",
							isHandle: ""
						}
					];
					// if (data.explain) {
					scoreList = [
						...scoreList,
						{
							abnormalType: data.explain.replace(
								// 说明行赋值
								/\n/g,
								"<br>"
							),
							time: "",
							minute: "",
							isSuperise: "",
							isHandle: ""
						}
					];
					// }
					this.detailData =
						data.detailList && data.detailList.length
							? [...data.detailList, ...scoreList]
							: [...scoreList];
				}
			});
		},
        /**
         * @desc 获取安全详情
		 * @param {Object} param 节点数据
		 * @callback
         */
		async getSafetyDetail(param, callback) {
			const { detailData } = await getSafetyDetail(param);
			callback(detailData);
		},
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			//表格合并行
			if (
				rowIndex === this.detailData.length - 1 ||
				rowIndex === this.detailData.length - 2
			) {
				if (columnIndex === 1) {
					return {
						rowspan: 1,
						colspan: 6
					};
				}
			}
		},
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex === this.detailData.length - 1) {
				return "warning-row";
			}
			if (rowIndex === this.detailData.length - 2) {
				return "center-row";
			}
			return "";
		},
        /**
         * @desc 获取表格数据
         */
		async getList() {
			this.listLoading = true;
			const { data } = await getSafetyData(this.listQuery);
			this.total = data.total;
			this.tableData = data.safetyTableList;
			this.listLoading = false;
		}
	}
};
</script>

<style lang="scss">
#nuclearSafety {
	.warning-row {
		background-color: rgb(241, 241, 241);
	}
	.tips {
		text-align: left;
		bottom: 0;
		left: 0;
		width: 300px;
		position: absolute;
		color: #999;
	}
	.center-row {
		.cell {
			text-align: center;
		}
	}
	/deep/ {
		.el-table th {
			background: #d5e9fa;
			font-weight: 400;
			color: #333;
		}
		.table-cell {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.el-table td,
		.el-table th.is-leaf {
			border-bottom: 1px solid rgb(221, 220, 220);
		}

		.el-table--border th,
		.el-table--border th.gutter:last-of-type {
			border-bottom: 1px solid rgb(221, 220, 220);
		}

		.el-table--border td,
		.el-table--border th {
			border-right: 1px solid rgb(221, 220, 220);
		}
	}
}
</style>
